<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Light Bulb</title>
<style>
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0; 
    }
    #bulb {
        width: 200px;
        height: auto;
        margin-top: 40px; 
    }
    button {
        font-size: 16px;
        padding: 10px 20px; 
        cursor: pointer;
        margin-bottom: 40px;
    }
</style>
</head>
<body>
    <button id="toggleButton">开灯</button>
    <img id="bulb" src="img/off.jpg" alt="Light Bulb">

    <script>
        const bulbImage = document.getElementById('bulb');
        const toggleButton = document.getElementById('toggleButton');
        
        let isLightOn = false; 

        toggleButton.addEventListener('click', function() {
            if (!isLightOn) {
                bulbImage.src = 'img/on.jpg'; 
                toggleButton.textContent = '关灯'; 
                isLightOn = true; 
            } else {
                bulbImage.src = 'img/off.jpg';
                toggleButton.textContent = '开灯'; 
                isLightOn = false; 
            }
        });
    </script>
</body>
</html>